<div uib-dropdown is-open="NetworkList.isOpen" on-toggle="NetworkList.toggled(open)" auto-close="{{ NetworkList.allowMultiple ? 'outsideClick' : 'always' }}">
	<button class="btn btn-default uib-dropdown-toggle" type="button" uib-dropdown-toggle>
		<div class="caption">
			<em ng-if="NetworkList.isLoading" translate>Loading…</em>
			<span ng-if="!NetworkList.isLoading" ng-repeat="ifc in NetworkList.interfaces | filter : NetworkList.isChecked as selected">
				<span title="ifc.name()"><img ng-src="{{ifc.icon()}}">{{ifc.name()}}</span>
				<span ng-if="!$last" class="sep">|</span>
			</span>
		 	<em ng-if="!NetworkList.isLoading && !selected.length">unspecified</em>
	 		<span class="caret"></span>
		</div>
	</button>
	<ul class="dropdown-menu">
		<li ng-repeat="ifc in NetworkList.interfaces" value="{{ifc.name()}}" ng-class="{selected: NetworkList.checked[ifc.name()]}">
			<a href="#" ng-click="NetworkList.select(ifc.name()); $event.preventDefault()"><img ng-src="{{ifc.icon()}}"> {{ifc.name()}}</a>
		</li>
		<li ng-if="!NetworkList.allowMultiple" ng-class="{selected: NetworkList.isUnspecified()}" value="">
			<a href="#" ng-click="NetworkList.select(''); $event.preventDefault()"><em>unspecified</em></a>
		</li>
	</ul>
</div>
